<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="function-box">
					<view class="function-item flexWrap">
						<view class="th1">活动名称</view>
						<view class="th2">有效期</view>
						<view class="th3">状态</view>
						<view class="th4">操作</view>
					</view>
					<view class="function-item flexWrap" v-for="(item,index) in listData" :key="index">
						<view class="th1">{{item.activityName}}</view>
						<view class="th2" v-if="item.termTime=='永久有效'">{{item.termTime}}</view>
						<view class="th2" style="flex-wrap: wrap;" v-else>
							{{item.termTime.split('~')[0]}}~<br/>{{item.termTime.split('~')[1]}}
						</view>
						<view class="th3">{{formatStatus(item.status)}}</view>
						<view class="th4">
							<text  @tap="goPage('/moduleB/manage/addAndEditReturn?id='+item.id)">设置</text>
							<text class="red" @tap="handleEnd(item.id)" v-if="item.status==2">结束</text>
							<text class="red" @tap="handleDelete(item.id)" v-if="item.status==1">删除</text>
						</view>
					</view>
					<view class="tips">
						<text style="flex-shrink: 0;">备注：</text>
						<text>活动关联优惠券，当优惠券数量不足，系统将自动结束任务。</text>
					</view>
					
				</view>
				
				<view class="bottom-btn">
					<view class="btn" @tap="goPage('/moduleB/manage/addAndEditReturn')">新增</view>
				</view>
				
			<!-- 	<view class="add-btn"  @tap="goPage('/moduleB/manage/addAndEditReturn')">
					新增
				</view> -->
				<!--操作指引悬浮按钮 -->
				<guideline :path="'moduleB/manage/returnList'"></guideline>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				listData:[],
			}
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		onShow() {
			this.getList()
		},
		methods: {
			getList(){
				this.$request.post(this.$api.returnActivityList, {
					storeId:uni.getStorageSync('store_id'),
				}, {
					isJava:true,
				}).then(res => {
					let {
						data = {}
					} = res;
					
					this.listData=data||[]
				})
			},
			
			formatStatus(value){
				if (value ==1) {
					return '待开始';
				} else if (value ==2) {
					return '进行中';
				} else if (value ==3) {
					return '已结束';
				}		
			},
				
			handleEnd(id){
				uni.showModal({
					title: '提示',
					content: '确定结束活动？',
					confirmText:'结束',
					success: res=>{
						if (res.confirm) {
							this.$request.post(this.$api.returnActivityEnd, {
								id:id,
							}, {
								isJava:true,
							}).then(res => {
								if(res.code==200){
									this.$tools.showToast('活动结束成功')
									this.getList()
								}
							})
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			
			handleDelete(id){
				uni.showModal({
					title: '提示',
					content: '确定删除活动？',
					confirmText:'删除',
					success: res=>{
						if (res.confirm) {
							this.$request.post(this.$api.returnActivityDelete, {
								id:id,
							}, {
								isJava:true,
							}).then(res => {
								if(res.code==200){
									this.$tools.showToast('删除成功')
									this.getList()
								}
							})
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 36upx;
		.function-box{
			background: #1D1C5C;
			border-radius: 10upx;
			padding: 30upx;
			margin-bottom: 50rpx;
			.function-item{
				font-size: 24upx;
				color: #FFFFFF;
				height: 118rpx;
				border-bottom: 2rpx solid #36355E;
				border-left: 2rpx solid #36355E;
				border-right: 2rpx solid #36355E;
				&:nth-of-type(1){
					height: 90rpx;
					border-top: 2rpx solid #36355E;
					font-weight: bold;
					font-size: 30upx;
					.th3{
						color: #FFFFFF;
					}
				}
				>view{
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					padding:10rpx;
					box-sizing: border-box;
				}
				.th1{
					width: 180upx;
					border-right: 2rpx solid #36355E;
					overflow-x: scroll;
				}
				.th2{
					border-right: 2rpx solid #36355E;
					flex: 1;
				}
				.th3{
					width: 100upx;
					border-right: 2rpx solid #36355E;
				}
				.th4{
					width: 130upx;
					color: #26BCFD;
					gap: 14rpx;
					.red{
						color: #FF380D ;
					}
				}
			}
			.tips{
				line-height: 36rpx;
				font-size: 24upx;
				color:rgba(255, 255, 255, 0.8);
				border-bottom: 2rpx solid #36355E;
				border-left: 2rpx solid #36355E;
				border-right: 2rpx solid #36355E;
				padding: 10rpx;
				display: flex;
			}
		}
		
		.bottom-btn{
			width: 100%;
			position: sticky;
			bottom: 40rpx;
			left: 0;
			.btn{
				width: 670rpx;
				height: 80rpx;
				margin: 0 auto;
				background: rgb(31, 124, 247);
				border-radius: 72rpx;
				font-size: 34rpx;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	
	}
</style>
